<template>
  <div class="home">
    <div class="home-top">
      <span class="home-title">不凡数据大屏</span>
      <div class="home-time">
        {{ time }}
      </div>
      <div class="img" @click="clickFullScreen">
        <img src="@/icons/img/scale.png" alt="" />
      </div>
    </div>

    <el-row :gutter="20" class="row-1">
      <el-col :span="8">
        <div class="row-c">
          <div class="data-1">电商数据Shell Data</div>
          <div class="data-2">
            <span>销售量</span>
            <span>万元</span>
          </div>
          <div class="data-3">
            <countTo
              :startVal="startVal"
              :endVal="endVal"
              :duration="3000"
            ></countTo>
          </div>
          <div class="data-4">
            <div>完成百分比</div>
            <div class="data-5">
              <el-progress :percentage="80"></el-progress>
            </div>
          </div>
          <div class="data-6">热门搜索词 Top Search</div>
          <div class="data-7">
            <div ref="EchartsBox" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="mainPic" style="width: 100%"></div>
        <div class="main-1">
          <div ref="mapEchartsBox" style="width: 100%; height: 100%" />

          <div class="pieEchartsBox" style="width: 100%; height: 100%" />
        </div>
      </el-col>

      <el-col :span="5">
        <div class="order">
          <div class="order-1">统计数据 Statistics Data</div>
          <div class="order-2">
            <div class="order-3">
              <img
                class="img"
                src=""
                alt=""
              />
              <div class="order-4">
                <span>85.6</span>
                <span>订单总数</span>
              </div>
            </div>
            <div class="order-3">
              <img
                class="img"
                src=""
                alt=""
              />
              <div class="order-4">
                <span>85.6</span>
                <span>订单总数</span>
              </div>
            </div>
            <div class="order-3">
              <img
                class="img"
                src=""
                alt=""
              />
              <div class="order-4">
                <span>85.6</span>
                <span>订单总数</span>
              </div>
            </div>
            <div class="order-3">
              <img
                class="img"
                src=""
                alt=""
              />
              <div class="order-4">
                <span>85.6</span>
                <span>订单总数</span>
              </div>
            </div>
          </div>
          <div class="order-10">
            <div class="order-11">大额订单 Supper Orders</div>
            <div class="order-12">
              <table border="1">
                <tr>
                  <td>时间</td>
                  <td>物品</td>
                  <td>数量</td>
                  <td>金额</td>
                </tr>
                <tr v-for="item in tableData" :key="item.id">
                  <td>{{item.time}}</td>
                  <td>{{item.shop}}</td>
                  <td>{{item.num}}</td>
                  <td>{{item.moner}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="bottom"></div>
  </div>
</template>

<script>
import { baseData } from "@/api/home/home.js";
import xmsBasicUtil from "xms-basic-util";
import { timeFormat } from "./time.js";
import countTo from "vue-count-to";
import * as echarts from "echarts";
import china from "echarts/map/json/china.json";
import "echarts-wordcloud";
export default {
  data() {
    return {
      tableData:[
        {
          id:1,
          time:"12-22",
          shop:"物品1",
          num:"66",
          moner:"1632"
        },
        {
          id:2,
          time:"12-22",
          shop:"物品1",
          num:"66",
          moner:"1632"
        },
        {
          id:3,
          time:"12-22",
          shop:"物品1",
          num:"66",
          moner:"1632"
        },
        {
          id:4,
          time:"12-22",
          shop:"物品1",
          num:"66",
          moner:"1632"
        },
        {
          id:5,
          time:"12-22",
          shop:"物品1",
          num:"66",
          moner:"1632"
        },
        {
          id:6,
          time:"12-22",
          shop:"物品1",
          num:"66",
          moner:"1632"
        },
        {
          id:7,
          time:"12-22",
          shop:"物品1",
          num:"66",
          moner:"1632"
        },
        {
          id:8,
          time:"12-22",
          shop:"物品1",
          num:"66",
          moner:"1632"
        },
      ],
      time: "123",
      startVal: 100000,
      endVal: 12169872,
      order: [],
      backOrder: [],
    };
  },
  watch: {},
  components: { countTo },
  methods: {
    // 全屏
    clickFullScreen() {
      let element = document.querySelector(".home"); //设置后就是   id==con_lf_top_div 的容器全屏
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    // 柱状图
    init() {
      var xAxisData = [];
      var data1 = [];
      var data2 = [];
      // 模拟80条数据
      for (var i = 0; i < 50; i++) {
        xAxisData.push("date" + i);
        data1.push(Math.ceil(Math.random() * 10));
        data2.push(Math.ceil(Math.random() * 10));
      }

      var chartDom = document.querySelector(".mainPic");
      var myChart = echarts.init(chartDom);
      var option;
      // 绘制图表
      option = {
        title: {
          text: "退单订单销量柱状图",
          // 标题字体样式
          textStyle: {
            color: "#9AA8D4",
            fontSize: 22,
            fontWeight: "normal",
          },
        },

        tooltip: {},
        // 两个按钮的样式
        legend: {
          // 按钮名字
          data: ["订单", "退单"],
          // 距离底部
          bottom: 10,
          // 按钮样式，颜色和大小
          textStyle: {
            color: "#A8AAB3",
            fontSize: 12,
          },
        },
        xAxis: {
          data: xAxisData,
          // 网格是否显示
          splitLine: {
            show: false,
          },
          // x线的样式，横线的颜色等
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#A8AAB3", // 左边线的颜色
              width: "1", // 横轴坐标线的宽度
            },
          },
          axisLabel: {
            // 横轴,坐标轴字体样式
            textStyle: {
              color: "#A8AAB3", // 坐标值得具体的颜色
              fontSize: 12,
            },
          },
        },
        // y轴样式
        yAxis: {
          // 横线显示
          splitLine: {
            show: false,
          },
          // y线的样式
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#A8AAB3", // 左边线的颜色
              width: "2", // 坐标线的宽度
            },
          },
          axisLabel: {
            // 竖轴,坐标轴字体样式
            textStyle: {
              color: "#A8AAB3", // 坐标值得具体的颜色
              fontSize: 12,
            },
          },
        },
        series: [
          {
            name: "订单",
            type: "bar",
            data: data1,
            itemStyle: {
              normal: {
                // 渐变柱状图
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#7D05E2" }, // 柱图渐变色
                  { offset: 0.5, color: "#B600FF" }, // 柱图渐变色
                  { offset: 1, color: "#BC04E2" }, // 柱图渐变色
                ]),
              },
            },
          },
          {
            name: "退单",
            type: "bar",
            data: data2,
            itemStyle: {
              normal: {
                // 渐变柱状图
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#24CBFF" }, // 柱图高亮渐变色
                  { offset: 0.5, color: "#24A3FF" }, // 柱图高亮渐变色
                  { offset: 1, color: "#2492FF" }, // 柱图高亮渐变色
                ]),
              },
            },
          },
        ],
        // 柱状图出现动画
        animationEasing: "elasticOut",
        animationDelayUpdate: function (idx) {
          return idx * 5;
        },
      };
      option && myChart.setOption(option);
    },
    // 饼状图
    pieEchartsBox() {
      var chartDom = document.querySelector(".pieEchartsBox");
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: "购买终端",
          // 标题字体样式
          textStyle: {
            color: "#9AA8D4",
            fontSize: 22,
            fontWeight: "normal",
          },
        },
        // hover扇面时候显示的内容 b是data的name  c是data的value
        tooltip: {
          trigger: "item",
          formatter: "{b}数量 : {c}个;占比 ({d}%)",
        },
        // legend: {
        //     left: 'center',
        //     top: 'bottom',
        //     data: ['ios', 'PC Web', 'Android', 'Wap Web']
        // },
        // toolbox: {
        //     show: true,
        //     feature: {
        //         mark: { show: true },
        //         dataView: { show: true, readOnly: false },
        //         magicType: {
        //             show: true,
        //             type: ['pie', 'funnel']
        //         },
        //         restore: { show: true },
        //         saveAsImage: { show: true }
        //     }
        // },
        series: [
          {
            name: "面积模式",
            type: "pie",
            // 最外圈和最内圈的比例大小
            radius: ["25%", "50%"],

            roseType: "area",
            data: [
              {
                value: 25,
                name: "Android",
                label: {
                  normal: {
                    textStyle: {
                      // 字体颜色渐变  扇颜色保持一致
                      color: "#4B4CDC",
                      fontSize: 12,
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    // 渐变柱状图
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#6D48DC" }, // 柱图渐变色
                      { offset: 0.5, color: "#6D48DC" }, // 柱图渐变色
                      { offset: 1, color: "#4B4CDC" }, // 柱图渐变色
                    ]),
                  },
                },
              },
              {
                value: 20,
                name: "ios",
                label: {
                  normal: {
                    // 字体颜色
                    textStyle: {
                      color: "#248DFF",
                      fontSize: 12,
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    // 渐变柱状图
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#24C9FF" }, // 柱图渐变色
                      { offset: 0.5, color: "#24ABFF" }, // 柱图渐变色
                      { offset: 1, color: "#248DFF" }, // 柱图渐变色
                    ]),
                  },
                },
              },
              {
                value: 15,
                name: "PC Web",
                label: {
                  normal: {
                    textStyle: {
                      color: "#BD00FF",
                      fontSize: 12,
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    // 渐变柱状图
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#D200FF" }, // 柱图渐变色
                      { offset: 0.5, color: "#BD00FF" }, // 柱图渐变色
                      { offset: 1, color: "#BD00FF" }, // 柱图渐变色
                    ]),
                  },
                },
              },

              {
                value: 5,
                name: "Wap Web",
                label: {
                  normal: {
                    textStyle: {
                      color: "#70218F",
                      fontSize: 12,
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    // 渐变柱状图
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#8A1D89" }, // 柱图渐变色
                      { offset: 0.5, color: "#7C1D8C" }, // 柱图渐变色
                      { offset: 1, color: "#70218F" }, // 柱图渐变色
                    ]),
                  },
                },
              },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // 地图
    map() {
      echarts.registerMap("china", china); // 重点!!!!!
      var myEcharts = echarts.init(this.$refs.mapEchartsBox);
      var outname = [
        "南海诸岛",
        "北京",
        "天津",
        "上海",
        "重庆",
        "河北",
        "河南",
        "云南",
        "辽宁",
        "黑龙江",
        "湖南",
        "安徽",
        "山东",
        "新疆",
        "江苏",
        "浙江",
        "江西",
        "湖北",
        "广西",
        "甘肃",
        "山西",
        "内蒙古",
        "陕西",
        "吉林",
        "福建",
        "贵州",
        "广东",
        "青海",
        "西藏",
        "四川",
        "宁夏",
        "海南",
        "台湾",
        "香港",
        "澳门",
      ];
      var outvalue = [
        0, 524, 13, 140, 75, 13, 83, 11, 19, 15, 69, 260, 39, 4, 31, 104, 36,
        1052, 33, 347, 9, 157, 22, 4, 18, 5, 2398, 41, 0, 484, 404, 22, 3, 5,
        225,
      ];
      // var outname = this.echartsData.outname;
      // var outvalue = this.echartsData.outvalue;
      var outdata = [];

      var max = 6000;
      var min = 10;
      // 改变涟漪圈从内到外的大小maxSize4Pin   minSize4Pin
      var maxSize4Pin = 30;
      var minSize4Pin = 6;

      for (var i = 0; i < outname.length; i++) {
        outdata.push({
          name: outname[i],
          value: outvalue[i],
        });
      }
      // 对应的省份和编码
      var geoCoordMap = {};
      /* 注册地图后可以使用getMap 获得地图信息 获取地图数据*/
      var mapFeatures = echarts.getMap("china").geoJson.features;
      mapFeatures.forEach(function (v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        // 把对应的省份和编码放入geoCoordMap
        geoCoordMap[name] = v.properties.cp;
      });
      var convertData = function (outdata) {
        var res = [];
        for (var i = 0; i < outdata.length; i++) {
          // 获取outdata里边省份的 编码
          var geoCoord = geoCoordMap[outdata[i].name];
          if (geoCoord) {
            res.push({
              name: outdata[i].name,
              value: geoCoord.concat(outdata[i].value),
            });
          }
        }
        return res;
      };

      var option = {
        // backgroundColor: '#0F1 C3C',
        title: {
          text: "全国订单人数分布图",
          textStyle: {
            color: "#9AA8D4",
            fontSize: 22,
            fontWeight: "normal",
          },
        },
        // 左下角条状数据
        // visualMap: {
        //     min: 0,
        //     max: 1100,
        //     text: ['多', '少'],
        //     realtime: false,
        //     calculable: true,
        //     inRange: {
        //         color: ['#073684', '#53D9FF']
        //     }
        // },
        tooltip: {
          show: true,
          formatter: function (params) {
            // console.log(params)
            if (params.value.length > 1) {
              return (
                "&nbsp;&nbsp;" +
                params.name +
                "&nbsp;&nbsp;&nbsp;" +
                params.value[2] +
                "人&nbsp;&nbsp;"
              );
            } else {
              return (
                "&nbsp;&nbsp;" +
                params.name +
                "&nbsp;&nbsp;&nbsp;" +
                params.value +
                "人&nbsp;&nbsp;"
              );
            }
          },
        },

        geo: {
          map: "china",
          show: true,
          roam: false,
          label: {
            emphasis: {
              show: false,
            },
          },
          layoutSize: "100%",
          itemStyle: {
            normal: {
              borderColor: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#00F6FF",
                  },
                  {
                    offset: 1,
                    color: "#53D9FF",
                  },
                ],
                false
              ),
              borderWidth: 3,
              shadowColor: "rgba(10,76,139,1)",
              shadowOffsetY: 0,
              shadowBlur: 60,
            },
          },
        },
        series: [
          {
            type: "map",
            map: "china",
            // 地图的长宽比
            aspectScale: 0.75,

            // 不显示省份名称
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },

            itemStyle: {
              // 省份的背景色和样式
              normal: {
                areaColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#073684", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#061E3D", // 100% 处的颜色
                    },
                  ],
                },
                borderColor: "#215495",
                borderWidth: 1,
              },
              // 鼠标移到省份时候hover显示的背景色和样式
              emphasis: {
                areaColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#073684", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#061E3D", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
            data: outdata,
          },
          {
            // 省份上显示的数字涟漪
            type: "effectScatter",
            // 该系列使用的坐标系'geo',使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
            coordinateSystem: "geo",
            // 涟漪特效相关配置
            rippleEffect: {
              brushType: "fill",
            },
            // 配置何时显示特效。
            showEffectOn: "render",
            /*
                          图形样式。
                          颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充
                      */
            itemStyle: {
              normal: {
                // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(5,80,151,0.2)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(5,80,151,0.8)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,108,255,0.7)",
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
            label: {
              normal: {
                show: false,
                color: "#fff",
                fontWeight: "bold",
                position: "inside",
                formatter: function (para) {
                  return "{cnNum|" + para.data.value[2] + "}";
                },
                // 在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
                rich: {
                  // cnNum和formatter里的 return '{cnNum|' + para.data.value[2] + '}'对应
                  cnNum: {
                    fontSize: 12,
                    color: "#D4EEFF",
                  },
                },
              },
            },
            // 涟漪的样式 circle 是圆圈,还有'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 等
            symbol: "circle",
            symbolSize: function (val) {
              if (val[2] === 0) {
                return 0;
              }
              var a = (maxSize4Pin - minSize4Pin) / (max - min);
              var b = maxSize4Pin - a * max;
              return a * val[2] + b * 1.2;
            },
            data: convertData(outdata),
            zlevel: 1,
          },
        ],
      };

      myEcharts.setOption(option);
    },
    // 云字符
    show() {
      var chart = echarts.init(this.$refs.EchartsBox);

      var option = {
        tooltip: {
          show: true,
        },
        series: [
          {
            type: "wordCloud",
            gridSize: 6,
            shape: "diamond",
            sizeRange: [30, 60],
            width: 800,
            height: 500,
            textStyle: {
              normal: {
                color: function () {
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                    ].join(",") +
                    ")"
                  );
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            data: [
              {
                name: " 特斯拉Model S",
                value: 30,
              },
              {
                name: "天生要强",
                value: 24,
              },
              {
                name: " 华为p20",
                value: 21,
              },
              {
                name: "杜兰特",
                value: 19,
              },
              {
                name: "三只松鼠",
                value: 18,
              },
              {
                name: "Mac Pro",
                value: 18,
              },
              {
                name: "Iphone12 Pro",
                value: 17,
              },
              {
                name: "玛莎拉蒂",
                value: 12,
              },
              {
                name: "小米手机",
                value: 12,
              },
              {
                name: "保时捷",
                value: 11,
              },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
  },
  created() {},
  mounted() {
    this.init();
    this.show();
    this.pieEchartsBox();
    this.map();
    setInterval(() => {
      this.time = timeFormat(new Date());
    }, 1000);
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 105%;
  height: 100vh;
  /* margin: 0 auto; */
  margin-top: -30px;
  margin-left: -31px;
  background-color: #0a1631;
  color: #fff;
  .home-top {
    width: 100%;
    height: 122px;
    background-image: url(http://shen_hao222.gitee.io/test_page/static/img/titleBG.a4cdf1b6.png);
    background-position-x: center;
    background-size: 80%;
    background-repeat: no-repeat;
    text-align: center;
    .home-title {
      color: #fff;
      font-size: 40px;
      /* text-align: center; */
      margin-top: 28px;
      display: inline-block;
    }
    .home-time {
      color: #fff;
      position: absolute;
      right: 60px;
      top: 16px;
      font-size: 25px;
    }
    .img {
      position: absolute;
      left: 25px;
      top: 17px;
      width: 30px;
      height: 30px;
      img {
        width: 100%;
        height: auto;
      }
    }
  }
  .row-c {
    box-sizing: border-box;
    padding: 20px;
  }
  .data-1 {
    height: 30px;
    font-size: 25px;
  }
  .data-2 {
    height: 65px;
    margin: 20px 0;
    margin-right: 70px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .data-3 {
    height: 70px;
    margin-bottom: 30px;
    font-size: 60px;
    text-align: center;
  }
  .mainPic {
    width: 100%;
    height: 400px;
  }
  .data-4 {
    font-size: 16px;
  }
  .data-5 {
    width: 60%;
    margin: 20px auto;
  }
  .data-5 ::v-deep .el-progress-bar__outer {
    height: 15px !important;
  }
  .data-5 ::v-deep .el-progress-bar__outer {
    background: #283052 !important;
  }
  .data-5 ::v-deep .el-progress__text {
    color: #fff;
    margin-left: 14px;
    font-size: 18px !important;
  }
  .data-5 ::v-deep .el-progress-bar__inner {
    background: linear-gradient(90deg, #24cbff 30%, #9000ff);
  }
  .data-6 {
    font-size: 25px;
  }
  .data-7 {
    height: 400px;
  }
  .main-1 {
    height: 300px;
    display: flex;
    justify-content: space-between;
  }
}
.img {
  width: 55px;
  height: 55px;
}
.order {
  color: #fff;
  width: 100%;
  .order-1 {
    width: 100%;
    font-size: 25px;
    color: #fff;
  }
  .order-2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .order-3 {
      width: 50%;
      margin: 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .order-4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.order-11{
  margin: 30px 0 20px;
  font-size: 25px;
}
tr{
  width: 100%;
}
td{
  width: 100px;
    height: 50px;
    text-align: center;
}
.bottom{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  background-color: #0a1631;
}
</style>